import React, { useState } from 'react'
import { ColorPicker, Flex, Form, Input, InputNumber, Slider, Typography, Watermark } from 'antd';
import type { ColorPickerProps, GetProp, WatermarkProps } from 'antd';


function list() {
  type Color = GetProp<ColorPickerProps, 'color'>;
  const { Paragraph } = Typography;
  interface WatermarkConfig {
    content: string;
    color: string | Color;
    fontSize: number;
    zIndex: number;
    rotate: number;
    gap: [number, number];
    offset?: [number, number];
  }
  const [form] = Form.useForm();
  const [config, setConfig] = useState<WatermarkConfig>({
    content: 'Ant Design',
    color: 'rgba(0, 0, 0, 0.15)',
    fontSize: 16,
    zIndex: 11,
    rotate: -22,
    gap: [100, 100],
    offset: undefined,
  });
  const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
  const watermarkProps: WatermarkProps = {
    content,
    zIndex,
    rotate,
    gap,
    offset,
    font: { color: typeof color === 'string' ? color : color.toRgbString(), fontSize },
  };

  return (
    <div>
      列表
      <Flex gap="middle">
        <Watermark {...watermarkProps}>
          <Typography>
            <Paragraph>
              The light-speed iteration of the digital world makes products more complex. However,
              human consciousness and attention resources are limited. Facing this design
              contradiction, the pursuit of natural interaction will be the consistent direction of
              Ant Design.
            </Paragraph>
          </Typography>
        
        </Watermark>
        <Form
          style={{ width: 280, flexShrink: 0, borderLeft: '1px solid #eee', paddingInlineStart: 16 }}
          form={form}
          layout="vertical"
          initialValues={config}
          onValuesChange={(_, values) => {
            setConfig(values);
          }}
        >
          <Form.Item name="content" label="Content">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item name="color" label="Color">
            <ColorPicker />
          </Form.Item>
          <Form.Item name="fontSize" label="FontSize">
            <Slider step={1} min={1} max={100} />
          </Form.Item>
          <Form.Item name="zIndex" label="zIndex">
            <Slider step={1} min={0} max={100} />
          </Form.Item>
          <Form.Item name="rotate" label="Rotate">
            <Slider step={1} min={-180} max={180} />
          </Form.Item>
          <Form.Item label="Gap" style={{ marginBottom: 0 }}>
            <Flex gap="small">
              <Form.Item name={['gap', 0]}>
                <InputNumber placeholder="gapX" style={{ width: '100%' }} />
              </Form.Item>
              <Form.Item name={['gap', 1]}>
                <InputNumber placeholder="gapY" style={{ width: '100%' }} />
              </Form.Item>
            </Flex>
          </Form.Item>
          <Form.Item label="Offset" style={{ marginBottom: 0 }}>
            <Flex gap="small">
              <Form.Item name={['offset', 0]}>
                <InputNumber placeholder="offsetLeft" style={{ width: '100%' }} />
              </Form.Item>
              <Form.Item name={['offset', 1]}>
                <InputNumber placeholder="offsetTop" style={{ width: '100%' }} />
              </Form.Item>
            </Flex>
          </Form.Item>
        </Form>
      </Flex>
    </div>
  )
}

export default list
